<template>
  <div class="detail-container">
    <home-content title="在线详情">
      <el-row>
        <el-col>
          <h1>在线听课详情</h1>
        </el-col>
      </el-row>
      <el-row class="query-box">
        <el-col class="query" :span="8">
          <div>课程编号:</div>
          <el-input v-model="queryInfo.courseName" placeholder="请输入"></el-input>
        </el-col>
        <el-col class="query" :span="8">
          <div>学员ID:</div>
          <el-input v-model="queryInfo.nickname" placeholder="请输入"></el-input>
        </el-col>
        <el-col class="timepicker" :span="8">
          <div class="query">
            <div>时间选择:</div>
            <el-date-picker
              class="query"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model="dateTime"
            ></el-date-picker>
          </div>
          <el-button type="primary" @click='queryList'>查询</el-button>
        </el-col>
      </el-row>
      <el-table
        stripe
        :data="tableData"
        :header-cell-style="headerStyle"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        style="width: 100%"
      >
        <el-table-column
          :prop="item.prop"
          v-for="item in colsOpt"
          :key="item.prop"
          :label="item.name"
        ></el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="queryInfo.pageSize"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
      ></el-pagination>
    </home-content>
  </div>
</template>

<script>
import HomeContent from "@/components/HomeContent";
import request from "@/utils/request";
import dayjs from "dayjs";
export default {
  name: "OnlineDetail",
  components: {
    HomeContent
  },
  data() {
    return {
      queryInfo: {
        pageNo: 1,
        pageSize: 10,
        startDate: null,
        endDate: null,
        nickname: "",
        courseName: "",
        videoName: ""
      },
      total: 0,
      dateTime: [
        dayjs()
          .subtract(10, "day")
          .format("YYYY-MM-DD"),
        dayjs().format("YYYY-MM-DD")
      ],
      colsOpt: [
        { prop: "courseCode", name: "课程编号" },
        { prop: "courseName", name: "课程名称" },
        { prop: "videoName", name: "课程视频" },
        { prop: "studentId", name: "学员ID" },
        { prop: "nickname", name: "学员昵称" },
        { prop: "buyTime", name: "学习时间" },
        { prop: "studyDuration", name: "学习时长" }
      ],
      tableData: [],
      headerStyle: {
        "background-color": "#78a8ef",
        height: "80px",
        color: "#f4f7fd",
        "text-align": "center",
        "font-size": "16px",
        "line-height": "22px"
      },
      rowStyle: {
        height: "60px",
        "font-size": "14px",
        "font-weight": 400,
        color: "rgba(102,102,102,1)"
      },
      cellStyle: {
        "text-align": "center",
        "line-height": "20px"
      }
    };
  },
  mounted() {
    this.initTableList();
  },
  methods: {
    async initTableList() {
      this.queryInfo.startDate = dayjs(this.dateTime[0]).format("YYYY-MM-DD");
      this.queryInfo.endDate = dayjs(this.dateTime[1]).format("YYYY-MM-DD");
      console.log(this.queryInfo);
      const { data: res } = await request.get("/course/onlineDetail", {
        params: this.queryInfo
      });
      this.tableData = res.result.content;
      this.total = res.result.total;
    },
    handleSizeChange(newsize) {
      this.queryInfo.pageSize = newsize;
      this.initTableList();
    },
    handleCurrentChange(newno) {
      this.queryInfo.pageNo = newno;
      this.initTableList();
    },
    queryList(){
        this.initTableList()
    }
  }
};
</script>

<style lang="less" scoped>
.query-box {
  margin: 30px 0;
}
.query {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  .el-input,
  .el-date-editor {
    max-width: 300px;
    margin-left: 20px;
  }
}
.timepicker {
  display: flex;
  justify-content: space-between;
  .el-button {
    width: 78px;
  }
}
/deep/ .el-table__row--striped td {
  background-color: rgba(229, 239, 254, 1) !important;
}
.el-pagination {
  margin-top: 30px;
  margin-bottom: 50px;
  float: right;
}
</style>